<template>
    <el-dialog title="打印四性检测报告" :visible.sync="open" width="60%" append-to-body :before-close="closeDelDialog">
        <div style="overflow-y: auto;" :style="'height:' + tableHeight + 'px'">
            <div class="printMain">
                <div style="margin-left:20px;">
                    <el-button type="danger" plain size="medium" @click="printTap">打印</el-button>
                    <el-button @click="closeDelDialog">取 消</el-button>
                </div>
            </div>
            <div>
            <!-- istype=1  打印    istype=2 查看 -->
            <sxjcComponent v-if="dataList" istype="1" ref="childComponent" :form="dataList" :sxjcId="sxjcId"></sxjcComponent>
        </div>
        </div>
    </el-dialog>
</template>

<script>
import { selectHandOverReceiveById, listinfo } from '@/api/archive/archiveTransfer/archiveTransfer.js'
import sxjcComponent from "@/views/archive/archiveTransfer/sxjcComponent.vue";//移交四性检测详情， 打印用
import estimateTableHeight from '@/mixins/estimateTableHeight';
export default {
    props: ["open", "sxjcId"],
    mixins: [estimateTableHeight], // 混入方法
    components: {
        sxjcComponent
    },
    watch: {
        sxjcId: {
            handler(valNew) {
                listinfo({ pId: valNew }).then(res => {
                    this.dataList=res.data
                })
            },
            immediate: true
        }
    },
    data() {
        return {
             //检测信息
             dataList: [],
           
        }
    },
    methods: {
        closeDelDialog() {
            this.$emit("closeDelDialog")
        },
        //打印
        printTap() {
            const tableElement = document.querySelector('.custom-table_01');
            const iframe = document.createElement('iframe');
            iframe.style.display = 'none';
            document.body.appendChild(iframe);
            const iframeDoc = iframe.contentWindow.document;

          

            iframeDoc.write(`
          <html>
          <head>
            <style>
              @media print {
                
            /* 表格边框 */
            table {
            border-collapse: collapse;
            border: 1px solid black;
            margin:0 auto;
            }
           
            /* 表格内容边框 */
            td, th {
            text-align: center; /* 设置单元格文本居中 */
            height: 32px;
            line-height: 32px;
            border: rgb(42, 41, 41) 1px solid;
            padding:0 10px;
            font-size:12px
            }
                .custom-table {
                  width: 100%; /* 设置表格宽度为100% */
                  border-collapse: collapse; /* 合并单元格边框 */
                }
                .custom-cell {
                  padding:5px 5px 5px 5px;
                  align-items:center;
                  justify-content:flex-start;
                  opacity:1;
                  color:#000000;
                  letter-spacing:2px;
                  font-family:仿宋;
                  font-size:16px;
                  border: 1px solid #000; /* 设置单元格边框样式 */
                  padding: 8px; /* 设置单元格内边距 */
                  text-align: center; /* 设置单元格文本居中 */
                }
                .title {
                  heigth: 5em;
                  line-height: 5em;
                  text-align: center;
                  padding:5px 5px 5px 5px;
                  align-items:center;
                  justify-content:center;
                  letter-spacing:4px;
                  font-weight:bold;
                  font-family:宋体;
                  font-size:24px;
                  opacity:1;
                }
              }
              .transf-title {
                    text-align: center;
                    line-height: 55px;
                    font-weight: bold;
                    font-size: 28px;
                }
             .orderBorder {
                width:100%;
                margin: 0px auto;
            }
            .orderBorder input{
                width:100%
            }
            .ymd {
                padding: 0;
                margin: 0;
                display: flex;
                width: 80%;
                text-align: right;
                align-items: center;
            }
            .pinput {
                display: flex;
                flex-direction: row;
                line-height: 42px;
                align-items: center;
            }
            .el-checkbox{
                display: flex;
                flex-direction: row;  
                line-height: 42px;
                align-items: center;
            }
            .el-checkbox .el-checkbox__label{
                margin-left:10px
            }

            .orderBorder input {
                height:30px;
                 border:0!important;
              
                }
                 .textNSME input {
                        text-align: right !important;
                    }

                input::-webkit-outer-spin-button,
                 input::-webkit-inner-spin-button {
                    -webkit-appearance: none !important;
                }

              input[type="number"] {
                    -moz-appearance: textfield;
                }

                .margin-input{
                    padding-top:10px
                }

                .transbz {
                    width: 100%;
                    text-align: center;
                }

            </style>
          </head>
          <body>
             ${tableElement.outerHTML}
            <script>
              window.onload = function() {
                window.print();
                window.close();
              }
            <\/script>
          </body>
          </html>
      `);
            iframeDoc.close();
        },
    }
}
</script>
